/*
    golwell ui css
*/

/* loading */

body
{
    margin:0px;
    padding:0px;
}
.ui-loading
{
    width:50px;
    height:50px;
    display:inline-block;
    position:relative;
}
.ui-loading>div
{
    width:4px;
    height:10px;
    background:#ccc;
    position:absolute;
    top:10%;
    left:50%;
    transform-origin:50% 200%;
}
.ui-loading>div:nth-child(1)
{
    transform:rotate(30deg);
    animation: animate-loading 1.2s linear -1.9s infinite both;
    -webkit-animation: animate-loading 1.2s linear -1.9s infinite ease-in-out both;
    -moz-animation: animate-loading 1.2s linear -1.9s infinite ease-in-out both;
}
.ui-loading>div:nth-child(2)
{
    transform:rotate(60deg);
    animation: animate-loading 1.2s linear -1.8s infinite both;
    -webkit-animation: animate-loading 1.2s linear -1.8s infinite both;
    -moz-animation: animate-loading 1.2s linear -1.8s infinite both;
}
.ui-loading>div:nth-child(3)
{
    transform:rotate(90deg);
    animation: animate-loading 1.2s linear -1.7s infinite both;
    -webkit-animation: animate-loading 1.2s linear -1.7s infinite both;
    -moz-animation: animate-loading 1.2s linear -1.7s infinite both;
}
.ui-loading>div:nth-child(4)
{
    transform:rotate(120deg);
    animation: animate-loading 1.2s linear -1.6s infinite both;
    -webkit-animation: animate-loading 1.2s linear -1.6s infinite both;
    -moz-animation: animate-loading 1.2s linear -1.6s infinite both;
}
.ui-loading>div:nth-child(5)
{
    transform:rotate(150deg);
    animation: animate-loading 1.2s linear -1.5s infinite both;
    -webkit-animation: animate-loading 1.2s linear -1.5s infinite both;
    -moz-animation: animate-loading 1.2s linear -1.5s infinite both;
}
.ui-loading>div:nth-child(6)
{
    transform:rotate(180deg);
    animation: animate-loading 1.2s linear -1.4s infinite both;
    -webkit-animation: animate-loading 1.2s linear -1.4s infinite both;
    -moz-animation: animate-loading 1.2s linear -1.4s infinite both;
}
.ui-loading>div:nth-child(7)
{
    transform:rotate(210deg);
    animation: animate-loading 1.2s linear -1.3s infinite both;
    -webkit-animation: animate-loading 1.2s linear -1.3s infinite both;
    -moz-animation: animate-loading 1.2s linear -1.3s infinite both;
}
.ui-loading>div:nth-child(8)
{
    transform:rotate(240deg);
    animation: animate-loading 1.2s linear -1.2s infinite both;
    -webkit-animation: animate-loading 1.2s linear -1.2s infinite both;
    -moz-animation: animate-loading 1.2s linear -1.2s infinite both;
}
.ui-loading>div:nth-child(9)
{
    transform:rotate(270deg);
    animation: animate-loading 1.2s linear -1.1s infinite both;
    -webkit-animation: animate-loading 1.2s linear -1.1s infinite both;
    -moz-animation: animate-loading 1.2s linear -1.1s infinite both;
}
.ui-loading>div:nth-child(10)
{
    transform:rotate(300deg);
    animation: animate-loading 1.2s linear -1.0s infinite both;
    -webkit-animation: animate-loading 1.2s linear -1.0s infinite both;
    -moz-animation: animate-loading 1.2s linear -1.0s infinite both;
}
.ui-loading>div:nth-child(11)
{
    transform:rotate(330deg);
    animation: animate-loading 1.2s linear -0.9s infinite both;
    -webkit-animation: animate-loading 1.2s linear -0.9s infinite both;
    -moz-animation: animate-loading 1.2s linear -0.9s infinite both;
}
.ui-loading>div:nth-child(12)
{
    transform:rotate(360deg);
    animation: animate-loading 1.2s linear -0.8s infinite both;
    -webkit-animation: animate-loading 1.2s linear -0.8s infinite both;
    -moz-animation: animate-loading 1.2s linear -0.8s infinite both;
}

/* webHead */

.ui-pagehead
{
    width:100%;
    height:auto;
    position:inherit;
    top:0px;
    left:0px;
    padding:3px 0;
    margin-bottom:5px;
    box-shadow:0px 3px 10px #aaaaaa;
    z-index:98;
}
.ui-pagehead>div.cover
{
    width:100%;
    background:#0f3675;
    opacity:1;
    top:0px;
    left:0px;
    z-index:99;
    position:absolute;
}
.ui-pagehead>div.content
{
    width:100%;
    opacity:1;
    top:0px;
    left:0px;
    position:absolute;
    z-index:100;
}
.ui-pagehead>div.content>span
{
    display:inline-block;
    font-size:14px;
    color:#ffffff;
    margin-left:10px;
    padding:10px 0;
}
.ui-pagehead>div.content>span.ui-pagehead-button
{
    display:block;
    width:auto;
    height:100%;
    padding:10px 5px;
    height:100%;
    background:#333;
    cursor:pointer;
    transition:background 0.5s;
    -webkit-transition:background 0.5s;
    -moz-transition:background 0.5s;
    -o-transition:background 0.5s;
}
.ui-pagehead>div.content>span.ui-pagehead-button:hover
{
    background:#666;
}

/* button */

.ui-button
{
    width:auto;
    display:inline-block;
    text-align:center;
    color:#000000;
    padding:8px;
    margin:0px;
    border:1px solid #e1e1e1;
    border-radius:6px;
    cursor:pointer;
    box-shadow:0px 0px 10px #e1e1e1;
    font-size:14px;
    background:#fefefe;
    text-decoration:none;
    background:linear-gradient(top,#fefefe 0%, #efefef 50%, #efefef 50%, #fefefe 100%);
    background:-moz-linear-gradient(top,#fefefe 0%, #efefef 50%, #efefef 50%, #fefefe 100%);
    background:-webkit-linear-gradient(top,#fefefe 0%, #efefef 50%, #efefef 50%, #fefefe 100%);
    background:-o-linear-gradient(top,#fefefe 0%, #efefef 50%, #efefef 50%, #fefefe 100%);
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -o-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.ui-button:hover
{
    color:#ffffff;
    box-shadow:0px 0px 10px #aaaaaa;
    background:#70a6d6;
}
.ui-button:focus
{
    border:1px solid #5294ce;
    box-shadow:0px 0px 14px #5294ce;
    outline:none;
}
.ui-inputshell
{
    width:auto;
    display:inline-block;
    border:1px solid #e1e1e1;
    padding:3px;
    border-radius:6px;
    box-shadow:0px 0px 10px #e1e1e1;
    background:#ffffff;
    transition:box-shadow 0.3s;
    -webkit-transition:box-shadow 0.3s;
    -moz-transition:box-shadow 0.3s;
    -o-transition:box-shadow 0.3s;
}
.ui-inputshell input
{
    height:25px;
    line-height:24px;
    font-size:14px;
    border:0px;
    background:#ffffff;
}
.ui-inputshell input:focus
{
    outline:none;
}
.ui-hovershadow
{
    box-shadow:0px 0px 10px #aaaaaa;
}
.ui-focusshadow
{
    box-shadow:0px 0px 10px #5294ce;
}

/* checkbox radio */

.ui-checkboxgroup,.ui-radiogroup
{
    width:auto;
    display:inline-block;
    border:1px solid #e1e1e1;
    border-radius:6px;
    box-shadow:0px 0px 10px #e1e1e1;
}
.ui-checkboxgroup>span.ui-title,.ui-radiogroup>span.ui-title
{
    width:90%;
    display:block;
    padding:8px 0 8px 10%;
    font-weight:bold;
}
.ui-checkboxgroup>div,.ui-radiogroup>div
{
    cursor:pointer;
    padding:8px 0px 8px 3px;
    display:inline-block;
}
.ui-checkboxgroup>div>label,.ui-radiogroup>div>label
{
    margin-left:5px;
    font-size:14px;
    cursor:pointer;
    color:#000;
}
.ui-checkboxgroup>div:hover>label,.ui-radiogroup>div:hover>label
{
    color:#00f;
}
.ui-checkboxgroup>div>input,.ui-radiogroup>div>input
{
    width:0px;
    height:0px;
    visibility:hidden;
}
.ui-checkboxgroup>div>span,.ui-radiogroup>div>span
{
    width:10px;
    height:10px;
    display:inline-block;
    
    border-radius:50%;
}
.ui-checkboxgroup>div>span.unchecked,.ui-radiogroup>div>span.unchecked
{
    margin:0 3px;
    background:#c1c1c1;
    box-shadow:0px 0px 10px #c1c1c1;
}
.ui-checkboxgroup>div>span.checked,.ui-radiogroup>div>span.checked
{
    margin:0 3px;
    background:#000;
    box-shadow:0px 0px 10px #00f;
}

/* imageview */

.ui-imageview
{
    display:inline-block;
    overflow:hidden;
    position:relative;
    z-index:10;
}
.ui-imageview>img
{
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    position:absolute;
    z-index:10;
    -webkit-transition:width 0.5s,height 0.5s,top 0.5s,left 0.5s;
    -moz-transition:width 0.5s,height 0.5s,top 0.5s,left 0.5s;
    -o-transition:width 0.5s,height 0.5s,top 0.5s,left 0.5s;
}
.ui-imageview>div
{
    position:absolute;
    transition:top 0.5s;
    -webkit-transition:top 0.5s;
    -moz-transition:top 0.5s;
    -o-transition:top 0.5s;
}
.ui-imageview>div.cover
{
    z-index:11;
    background:#000;
    opacity:0.5;
}
.ui-imageview>div.cover>span
{
    visibility:hidden;
}
.ui-imageview>div.content
{
    z-index:12;
}
.ui-imageview>div.content>span
{
    display:block;
    padding:10px;
    color:#fff;
    font-size:14px;
}
.ui-imageview:hover>img.zoom
{
    width:120%;
    height:120%;
    top:-10%;
    left:-10%;
}
.ui-ivfrombottom>div
{
    width:100%;
    height:100%;
    top:100%;
    left:0;
}
.ui-ivfrombottom:hover>div
{
    top:75%;
}
.ui-ivfromtop>div
{
    width:100%;
    height:auto;
    padding-bottom:20px;
    top:-100%;
    left:0;
}
.ui-ivfromtop:hover>div
{
    top:0;
}
.ui-ivfixtop>div
{
    width:100%;
    height:auto;
    padding-bottom:20px;
    top:0;
    left:0;
}
.ui-ivfixbottom>div
{
    width:100%;
    height:100%;
    top:80%;
    left:0;
}